<style lang="less">
@import './style.less';
</style>

<template>
    <div class="studyReport">
        <el-tabs v-model="activeTab" type="border-card">
            <!-- 学员报告 -->
            <el-tab-pane label="学员报告" name="trainee">
                <div class="op-header">
                    <div class="search">
                        <el-cascader
                            class="enable-select"
                            v-model="enableValue"
                            :options="enableOptions"
                            :props="cascaderProps"
                            placeholder="启用状态"
                        />
                        <el-select
                            class="search-input"
                            placeholder="指定学员"
                            size="mini"
                            filterable
                            multiple
                            remote
                            v-model="selectedTrainee"
                            :remote-method="value => searchTrainee(value, 'trainee')"
                        >
                            <el-option
                                v-for="item in trainees"
                                :key="item.userId"
                                :label="item.name"
                                :value="item.userId" />
                        </el-select>
                        <el-select
                            class="search-input"
                            placeholder="指定任务"
                            size="small"
                            filterable
                            multiple
                            remote
                            v-model="selectedTask"
                            :remote-method="value => searchTask(value, 'trainee')"
                        >
                            <el-option
                                v-for="item in trainList.content"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id" />
                        </el-select>
                        <el-cascader
                            class="department-select"
                            :clearable="true"
                            v-model="departmentValue"
                            :options="organizations"
                            :props="cascaderProps"
                            placeholder="所属部门"
                        />
                        <el-input
                            class="search-input "
                            size="small"
                            v-model="searchInput"
                            placeholder="请输入查询关键字"
                            prefix-icon="el-icon-search"
                        />
                        <el-button
                            class="search-button"
                            size="small"
                            type="primary"
                            @click="search('trainee')"
                        >
                            <i class="el-icon-search icon-right"/>查询
                        </el-button>
                        <el-button
                            class="search-button"
                            size="small"
                            type="primary"
                            @click="download('trainee')">
                            报告下载
                        </el-button>
                        <el-button
                            class="search-button"
                            size="small"
                            type="warning"
                            :disabled="!selectedRows.length"
                            @click="deleteReport('trainee')"
                        >
                            清除报告
                        </el-button>
                    </div>
                </div>
                <table-ex
                    ref="table"
                    table-id="studyReport"
                    :rows="studyReports"
                    :total="studyReportsTotal"
                    :columns="columns"
                    :on-operation="onClickOperation"
                    :on-page-change="onPageChange"
                    :on-select-change="rows => selectChange(rows, 'trainee')"
                />
                <table-ex
                    v-show="false"
                    ref="table"
                    table-id="examReport"
                    :rows="traineeExcelData"
                    :columns="traineeExcelColumns"
                />
            </el-tab-pane>

            <!-- 组织报告 -->
            <el-tab-pane label="组织报告" name="organization">
                <div class="op-header">
                    <div class="search">
                        <el-cascader
                            class="enable-select"
                            v-model="oEnableValue"
                            :options="enableOptions"
                            :props="cascaderProps"
                            placeholder="启用状态" />

                        <el-cascader
                            class="department-select"
                            :clearable="true"
                            v-model="oDepartmentValue"
                            :options="organizations"
                            :props="cascaderProps"
                            placeholder="所属部门"
                        />
                        <el-input
                            class="search-input "
                            size="small"
                            v-model="oSearchInput"
                            placeholder="请输入查询关键字"
                            prefix-icon="el-icon-search"
                        />
                        <el-button
                            class="search-button"
                            size="small"
                            type="primary"
                            @click="search('organization')"
                        >
                            <i class="el-icon-search icon-right" />查询
                        </el-button>
                        <el-button class="search-button"
                                size="small"
                                type="primary"
                                @click="download('organization')">
                                报告下载
                        </el-button>
                    </div>
                </div>
                <table-ex
                    ref="oTable"
                    table-id="organizationReport"
                    selection="none"
                    :rows="sOrganizationReports"
                    :total="sOrganizationTotal"
                    :columns="oColumns"
                    :on-operation="onClickOperation"
                    :on-page-change="onOPageChange"
                />
            </el-tab-pane>
        </el-tabs>
        <el-dialog title="查看任务" :visible.sync="taskVisible">
            <div class="dialog-content">
                <table-ex
                    selection="none"
                    :rows="studyReportTasks"
                    :total="studyTaskTotal"
                    :columns="taskColumns"
                    :on-operation="taskClickOperation"
                    :on-page-change="onTaskPageChange"
                />
            </div>

        </el-dialog>
        <el-dialog title="学习详情" :visible.sync="detailVisible">
            <table-ex
                isFooter
                selection="none"
                :rows="detailRows"
                :columns="detailColumns"
                :on-operation="onClickOperation"
            />
        </el-dialog>
    </div>
</template>

<script>
    import { mapGetters, mapActions, mapMutations } from 'vuex'
    import pageConfig from './config'
    import api from '@/api/index'
    import tableEx from '@/components/table/tableEx'

    export default {
        name: 'studyReport',
        components: {
            'table-ex': tableEx
        },
        data() {
            return {
                // 学习报告相关属性
                enableValue: [],
                departmentValue: [],
                traineeInput: '',
                searchInput: '',
                columns: pageConfig.columns,
                // 组织报告相关属性
                oEnableValue: [],
                oDepartmentValue: [],
                oSearchInput: '',
                oColumns: pageConfig.oColumns,
                // 公共属性
                taskVisible: false,
                detailVisible: false,
                currentTaskType: '',
                taskRows: [],
                taskColumns: pageConfig.taskColumns,
                detailRows: [],
                detailColumns: pageConfig.detailColumns,
                activeTab: 'trainee',
                options: pageConfig.options,
                enableOptions: pageConfig.enableOptions,
                cascaderProps: {
                    value: 'id',
                    label: 'title',
                    children: 'children'
                },
                // table条目选择
                selectedRows: [],
                // 选择学员
                selectedTrainee: [],
                // 选择部门
                selectedTask: [],
                // 导出excel的columns
                traineeExcelColumns: pageConfig.traineeExcelColumns,
                // 导出excel的数据
                traineeExcelData: []
            }
        },

        /**
         * 生命钩子
         **/
        mounted() {
            this.loadData()
        },

        /**
         * 计算
         **/
        computed: {
            ...mapGetters([
                'studyReports',
                'sOrganizationReports',
                'sOrganizationReports',
                'studyReportTasks',
                'organizations',
                'studyReportsTotal',
                'sOrganizationTotal',
                'studyTaskTotal',
                'trainees',
                'trainList'
            ])
        },
        /**
         * 事件
         **/
        methods: {
            ...mapActions([
                'getOrganizations',
                'getStudyReports',
                'getSOrganizationReports',
                'getSOrganization',
                'getStudyReport',
                'getTrainees',
                'getTrainList',
                'deleteStudyEmployeeExamReport'
            ]),
            ...mapMutations([
                'SETSTUDYREPORTSPAGE',
                'SETSORGANIZATIONRPAGE',
                'SETSTUDYORGANIZATIONTASKPAGE'
            ]),
            onFormatter() {

            },
            loadData() {
                this.getOrganizations()
                this.getStudyReports()
                this.getSOrganizationReports()
                this.getTrainees()
                this.getTrainList()
            },
            search(type) {
                if (type === 'trainee') {
                    const filter = {
                        taskKeyword: this.searchInput ? this.searchInput : null,
                        organizationId: this.departmentValue ? this.departmentValue[this.departmentValue.length - 1] : null,
                        taskEnabled: this.enableValue[0] ? this.enableValue[0] : null,
                        employeeIds: this.selectedTrainee,
                        taskIds: this.selectedTask,
                    }
                    this.SETSTUDYREPORTSPAGE({
                        number: 1,
                        filter
                    })
                    this.getStudyReports()
                } else {
                    const filter = {
                        title: this.searchInput ? this.searchInput : null,
                        organizationId: this.departmentValue,
                        taskEnabled: this.oEnableValue[0] ? this.oEnableValue[0] : null
                    }
                    this.SETSORGANIZATIONRPAGE({
                        number: 1,
                        filter
                    })
                    this.getSOrganizationReports()
                }
            },
             // 搜索员工
            searchTrainee(value, type) {
                let filter = {
                    size: 100,
                    number: 0,
                    pages: 0,
                    filter: {
                        enabled: null,
                        name: value
                    },
                }
                this.getTrainees(filter)
            },
            // 删除报告
            deleteReport() {
                let lIds = this.selectedRows.map(item => {
                    return item.trainee.employeeId
                })
                this.deleteStudyEmployeeExamReport({ lIds })
            },
             // 选择条目
            selectChange(rows, type) {
              console.log('selectChange: ', rows)
                this.selectedRows = rows
            },
            // 导出Excel
            download(type) {
                if (type === 'trainee') {
                    let filter = {
                        size: 1000,
                        number: 0,
                        total: 0,
                        pages: 1,
                        filter: {
                            taskIds: this.selectedTask,
                        }
                    }
                    api.getStudyReports({
                        method: 'post',
                        data: filter,
                        success: (res) => {
                            // 字段处理
                            if (res.content && res.content.length) {
                                for (let item of res.content) {
                                    item.user = item.trainee.username
                                    item.name = item.trainee.name
                                    item.numberId = item.trainee.employeeId
                                    item.jobTitle = item.trainee.jobTitle
                                    if (item.trainee.organizationTitles) {
                                        item.institution = item.trainee.organizationTitles.join('/')
                                    }
                                    item.taskFinishedPercent = item.businessCountOfAssigned === 0 ? 0 : parseInt((item.businessCountOfFinished / item.businessCountOfAssigned) * 100) + '%'
                                    item.businessPassedPercent = item.businessCountOfAssigned === 0 ? 0 : parseInt((item.businessCountOfPassed / item.businessCountOfAssigned) * 100) + '%'
                                }
                                this.traineeExcelData = res.content
                                setTimeout(() => {
                                    this.$refs.table.exportExcel()
                                }, 500)
                            }
                        }
                    })
                } else {
                    this.$refs.oTable.exportExcel()
                }
            },

            onClickOperation(oper, row) {
                this.taskRows = []
                if (oper.prop === 'edit') {
                    this.currentTaskType = 't'
                    this.taskColumns = pageConfig.taskColumns
                    let filter = {
                        employeeIds: [row.trainee.userId]
                    }
                    this.$store.commit('SETSTUDYORGANIZATIONTASKPAGE', { number: 1, filter })
                    this.getStudyReport()
                } else {
                    this.currentTaskType = 'o'
                    this.taskColumns = pageConfig.oTaskColumns
                    let filter = {
                        organizationId: row.organization.id
                    }
                    this.$store.commit('SETSTUDYORGANIZATIONTASKPAGE', { number: 1, filter })
                    this.getSOrganization()
                }
                this.taskVisible = true
            },

            taskClickOperation(prop, row) {
                this.detailRows = []
                if (row.businessRecords && row.businessRecords.length) {
                    row.businessRecords.forEach(item => {
                        Object.assign(item, item.lastRecord)
                        item.name = item.business.name
                        if(item.timeCost < 0) {
                            item.timeCost = 'N/A'
                        }
                    })
                    this.detailRows = row.businessRecords
                }
                this.detailVisible = true
            },

            onPageChange(number) {
                this.SETSTUDYREPORTSPAGE({ number })
                this.getStudyReports()
            },
            onOPageChange(number) {
                this.SETSORGANIZATIONRPAGE({ number })
                this.getSOrganizationReports()
            },
            onTaskPageChange(number) {
                this.$store.commit('SETSTUDYORGANIZATIONTASKPAGE', { number })
                if (this.currentTaskType === 't') {
                    this.getStudyReport()
                } else {
                    this.getSOrganization()
                }
            }
        }
    }
</script>

